<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>满意度调查</el-breadcrumb-item>
    </el-breadcrumb>
    <!--搜索-->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="老师">
        <el-input v-model="searchForm.username" placeholder="老师"></el-input>
      </el-form-item>
      <el-form-item label="年份">
        <el-date-picker
          v-model="searchForm.year"
          type="year"
          placeholder="选择年">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <!--数据-->
    <el-table
      :data="searchStatis"
      border
      style="width: 100%;text-align: center">
      <el-table-column
        prop="dateTime"
        label="调查时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="老师姓名"
        width="180">
        <template slot-scope="scope">
          <svg class="icon" aria-hidden="true">
            <use v-if="scope.row.sex==='男'" xlink:href="#iconnanlaoshi"></use>
            <use v-if="scope.row.sex==='女'" xlink:href="#iconnvlaoshi"></use>
          </svg>
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="score"
        label="分数">
      </el-table-column>
      <el-table-column
        prop="classId"
        label="评分班级">
      </el-table-column>
      <el-table-column prop="isOpen" label="是否开启">
        <template slot-scope="scope">
          <el-switch
            disabled
            v-model="scope.row.isOpen"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="mini" round>详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>

  </div>
</template>

<script>
  export default {
    name: "Index",
    data() {
      return {
        searchForm: {},
        statisfactions: [
          {
            dateTime: '2016-05-02',
            name: '王小虎',
            isOpen: false,
            sex: '男',
            score: 100,
            classId: '2067'
          }, {
            dateTime: '2015-05-04',
            name: '王小虎',
            isOpen: false,
            sex: '男',
            score: 100,
            classId: '2067'
          }, {
            dateTime: '2020-05-01',
            name: '王小虎',
            isOpen: false,
            sex: '女',
            score: 100,
            classId:'2067'
          }, {
            dateTime: '2016-05-03',
            name: '王小虎',
            isOpen: false,
            sex: '男',
            score: 100,
            classId:'2067'
          }],
        searchStatis: []
      }
    },
    mounted() {
      this.searchStatis = this.statisfactions
    },
    methods: {
      search() {
        if (this.searchForm.year) {
          this.searchStatis = this.statisfactions.filter((s) => {
            return new Date(s.dateTime).getFullYear() == this.searchForm.year.getFullYear()
          })
        } else {
          this.searchStatis = this.statisfactions
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped>
  a {
    text-decoration: none;
  }

  .demo-form-inline {
    margin-top: 20px;
  }

  .iconfont {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .el-pagination {
    margin-top: 10px;
  }
</style>
